import { Tree, Input, Rate} from 'antd';
import { useState ,useEffect } from 'react';
import {FormOutlined, PlusOutlined, MinusOutlined} from '@ant-design/icons';
const { Search } = Input;
import styles from "./SkillDescription.less"

interface IDescriptionData{
    key: string;
    title: string; 
    rate: number;
    content: string;
    length: number;
    children?: IDescriptionData [],
    isEdit:boolean,   //是否编辑
}
const SkillDescription: React.FC = ()=>{

    const desc = ['了解', '掌握', '精通'];
    
    //岗位描述文档列表
    const [data, setData] = useState<IDescriptionData []>([]);
    //当前选中文档
    const [current,setCurrent]=useState<IDescriptionData>({} as IDescriptionData)

    useEffect(() => {
        if(data.length && Object.keys(current).length){
            setCurrent(data[0])
        }
        
    }, [data])

    // 在树的尾部追加一项
    function addDescription(){
        setData([...data, {
            key: String(data.length),
            title: '岗位能力',
            length: data.length,
            rate: 1,
            content: '',
            isEdit:false
        }])
    }


    // 通过key找到当前项
    function searchItemByKey(array:IDescriptionData[], key: string) {
        for (let i=0; i<array.length; i++){
            let item = array[i];
            if (item.key == key){
                return item;
            }
            if (item.children){
                let result = searchItemByKey(item.children, key) as IDescriptionData;
                if (Boolean(result)){
                    return result;
                }
            }
        }
        return undefined;
    }

    // 在当前树增加一个子树
    function addChildDescription(key: string){
        let newData = [...data];
        let item = searchItemByKey(newData, key)
        let child = {
            key: `${key}-${++item!.length}`,
            title: '岗位能力',
            length: 0,
            rate: 1,
            content: '',
            isEdit:false
        }
        if (item!.children){
            item!.children.push(child);
        }else{
            item!.children = [child];
        }
        setData(newData);
    }

    // 从父树中删掉当前树
    function removeChildDescription(key: string){
        let newData = [...data];
        let indexs = key.split('-');
        if (indexs.length === 1){
            // 删除顶层树
            newData.forEach((item,index)=>{
                if (item.key === key){
                    newData.splice(index, 1);
                }
            })
        }else{
            // 删除子树
            let item = searchItemByKey(newData, indexs.slice(0, indexs.length - 1).join('-'));
            item?.children?.forEach((value,index)=>{
                if (value.key === key){
                    item?.children!.splice(index, 1);
                }
            })
        }
        setData(newData);
    }

    // 修改当前树的标题的编辑状态
    function editChildDescriptionTitle(key:string,status:boolean){
        let newData = [...data];
        let item = searchItemByKey(newData, key)
        item!.isEdit=status
        setData(newData)
    }

    // 修改标题
    function changeChildDescriptionTitle(key:string,title:string){
        let newData = [...data];
        let item = searchItemByKey(newData, key)
        item!.title=title
        setData(newData)
    }

    //选中当前文档
    function selectCurrentNode(key:string){
        let item = searchItemByKey(data, key)
        setCurrent(item as IDescriptionData)
    }

    // function handleChange = (value: any) => {
    //     this.setState({ value });
    //   };

    return <div className={styles.skilldescription}>
        
        {/* 左边树形结构 */}
        <section>
            <section className={styles.lefthead}>
                <Search style={{ marginBottom: 8 }} placeholder="清输入内容" />
                <span onClick={()=>addDescription()}>+</span>
            </section>
            <Tree className={styles.leftcon}
                autoExpandParent={true}
                treeData={data}
                titleRender={(nodeData:any)=>{
                    return <p onClick={()=>selectCurrentNode(String(nodeData.key))}>
                        {/* <span>{JSON.stringify(nodeData)}</span> */}
                        {
                            nodeData.isEdit ? <input type='text' value={nodeData.title} onKeyDown={e=>{
                                if(e.keyCode===13){
                                    editChildDescriptionTitle(String(nodeData.key),false)
                                }
                            }} onChange={e=>changeChildDescriptionTitle(String(nodeData.key),e.target.value)} />
                            : <span>{nodeData.title}</span>    
                        }
                        <FormOutlined onClick={()=>editChildDescriptionTitle(String(nodeData.key),true)} />
                        <PlusOutlined onClick={()=>addChildDescription(String(nodeData.key))}/>
                        <MinusOutlined onClick={()=>removeChildDescription(String(nodeData.key))}/>
                    </p>
                }}
            />
        </section>
        {/* 右边评分项和md编辑器 */}
        <section>
            {/* 评分 */}
            <div>
                <Rate count={3} tooltips={desc} value={current.rate} defaultValue={1}/>
            </div> 
        </section>
    </div>  
}

export default SkillDescription;

    // <section>
    //        <section className={styles.lefthead}>
    //                <Search style={{ marginBottom: 8 }} placeholder="清输入内容" />
    //                <span onClick={()=>addDescription()}>+</span>
    //            </section>
    //            <Tree className={styles.leftcon}
    //                autoExpandParent={true}
    //                treeData={station.skillList}
    //                titleRender={(nodeData:any)=>{
    //                    return <p onClick={()=>setCurrentSkillId(nodeData.id)}>
    //                        {/* <span>{JSON.stringify(nodeData)}</span> */}
    //                        {
    //                            isEdit && currentSkillId===nodeData.id ? <input type='text' value={station.skillDetail.skillName} onKeyDown={e=>{
    //                                if(e.keyCode===13){
    //                                    station.putSkill();
    //                                    setIsEdit(false);
    //                                }
    //                            }} onChange={e=>station.modifySKillDetail({skillName: e.target.value})} />
    //                            : <span>{currentSkillId===nodeData.id ?station.skillDetail.skillName: nodeData.label}</span>    
    //                        }
    //                        <FormOutlined onClick={()=>setIsEdit(true)} />
    //                        <PlusOutlined onClick={()=>addChildDescription(nodeData.id)}/>
    //                        <MinusOutlined onClick={()=>removeChildDescription(nodeData.id)}/>
    //                    </p>
    //                }}
    //            />
    //        </section> 